<%--
  Created by IntelliJ IDEA.
  User: XTT
  Date: 2022/10/12
  Time: 17:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<html>
<head>
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            margin-top: 30px;
            width: 100%;
            height: 100%;
        }
        .content-div1{
            margin-left: 200px;
            width: 600px;
            height: 400px;
        }
        .content-div2{
            text-align: center;
            float: right;
            margin-top: -402px;
            margin-right: 200px;
            width: 400px;
            height: 450px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="content-div1">
            <img src="${pageContext.request.contextPath}/images/room/${room.roomImg}" width="600px" height="400px">
        </div>
        <div class="content-div2">
            <p style="font-size: 30px">在线订房</p>

            <el-form :model="Client_info" :rules="rules" ref="Client_info" class="demo-ruleForm" label-width="80px" style="margin-top: 30px">
                <el-form-item label="房间型号" prop="typeName">
                    <el-col :span="40">
                        <el-select v-model="Client_info.typeName" disabled placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="入住时间" prop="startTime">
                    <el-col :span="20">
                        <el-date-picker type="date" placeholder="YYYY-MM-DD" v-model="Client_info.startTime" :picker-options="pickerOptionsStart" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="离开时间" prop="deadTime">
                    <el-col :span="20">
                        <el-date-picker type="date" placeholder="YYYY-MM-DD" v-model="Client_info.deadTime" :picker-options="pickerOptionsEnd" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="身份号码" prop="idCard">
                    <el-col :span="20">
                        <el-input
                                v-model="Client_info.idCard"
                                placeholder="请输入身份号码"
                                autocomplete="off"
                                style="width: 100%"
                        ></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-col :span="20">
                        <el-input
                                v-model="Client_info.phone"
                                autocomplete="off"
                                style="width: 100%"
                        ></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="clientName">
                    <el-col :span="20">
                        <el-input
                                type="text"
                                v-model="Client_info.clientName"
                                autocomplete="off"
                                style="width: 100%"
                        ></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('Client_info')" style="margin-right: 70px;width: 200px;margin-top: 20px">立即预定</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-top: 20px;margin-left: 201px">
            <p style="margin-top: 20px;margin-right: 210px"><span style="font-size: 25px;color: #FFB800">${room.price}$</span>/每晚</p>
            <p style="margin-top: 20px;margin-right: 140px"><span>大小：</span><span style="padding-left: 80px">${room.roomsize}英尺</span></p>
            <p style="margin-top: 20px;margin-right: 146px"><span>容量：</span><span style="padding-left: 80px">最多${room.proomnum}人</span></p>
            <p style="margin-top: 20px;margin-right: 217px"><span>床：</span><span style="padding-left: 95px">${room.croomnum}</span></p>
            <p style="margin-top: 20px;margin-right: 30px"><span>备注：</span><span style="padding-left: 80px">无限网络、电视、卫生...</span></p>
            <p style="margin-top: 20px;margin-right: 30px"><span style="color: #9c9da0">无限网络、电视、卫生...</span></p>
        </div>
    </div>
</body>

<script>
    new Vue({
        el:'#app',
        data() {
            // 姓名验证
            let startime = (rule, value, callback) => {
                // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                if (value) {
                        callback()
                } else {
                    callback(new Error('请填写时间'))
                }
            }
            // 姓名验证
            let xm = (rule, value, callback) => {
                let hhName = /^[\u4e00-\u9fa5]{2,4}$/
                // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                if (value) {
                    if (hhName.test(value)) {
                        callback()
                    } else {
                        callback(new Error('姓名格式不正确'))
                    }
                } else {
                    callback(new Error('请输入姓名'))
                }
            }
            // 身份证验证
            let checkIDCard = (rule, value, callback) => {
                let IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/
                // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                if (value) {
                    if (IDCardReg.test(value)) {
                        callback()
                    } else {
                        callback(new Error('身份证号格式不正确'))
                    }
                } else {
                    callback(new Error('请输入身份证号'))
                }
            }
            // 手机号正则校验
            let Mobile = (rule, value, callback) => {
                let Mobiles = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
                // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                if (value) {
                    if (Mobiles.test(value)) {
                        callback()
                    } else {
                        callback(new Error('手机号码格式不正确'))
                    }
                } else {
                    callback(new Error('请输入联系方式'))
                }
            }
            return {
                options: [{
                    value: '选项1',
                    label: '单人间'
                }, {
                    value: '选项2',
                    label: '双人间'
                }, {
                    value: '选项3',
                    label: '海景房'
                }, {
                    value: '选项4',
                    label: '总统套房'
                }, {
                    value: '选项5',
                    label: '情侣房'
                },{
                        value: '选项6',
                        label: '麻将房'
                    },{
                        value: '选项7',
                        label: '豪华套间'
                    },{
                    value: '选项8',
                    label: '电竞房'
                },{
                    value: '选项9',
                    label: '大床房'
                },{
                    value: '选项10',
                    label: '商务房'
                }

                    ],
                Client_info: {

                    /*  private int clientId;
    private String phone;
    private String idCard;
    private String clientName;
    private String sex;
    private String userName;
    private String password;*/
                    phone:'',
                    idCard:'',
                    clientName:'',
                    userName:'',
                    password:'',
                    startTime:'',
                    deadTime:'',
                    typeName:'${room.typeName}'

                },
                pickerOptionsStart:this.startTime(),
                pickerOptionsEnd:this.endTime(),
                rules:{
                    startTime:{required: true,validator: startime,trigger: 'blur'},
                    deadTime:{required: true,validator: startime,trigger: 'blur'},
                    idCard:{required: true,validator: checkIDCard,trigger: 'blur'},
                    phone:{required: true,validator: Mobile,trigger: 'blur'},
                    clientName:{required: true,validator: xm,trigger: 'blur'},
                }
            }
        },
        methods: {
            //时间
            startTime(){
                let that=this;
                return{
                    disabledDate: (time) => {
                        if (this.Client_info.deadTime) {
                            return time.getTime() <new Date(this.Client_info.deadTime).getTime()< Date.now() - 8.64e7
                        }else{//还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
                            return time.getTime() < Date.now() - 8.64e7
                        }

                    }
                }
            },
            endTime(){
                let that = this;
                return {
                    disabledDate(time) {
                        if (that.Client_info.startTime) {//如果开始时间不为空，则大于开始时间
                            return new Date(that.Client_info.startTime).getTime() > time.getTime();
                        } else {//开始时间不选时，结束时间最大值大于等于当天时间
                            return time.getTime() < Date.now() - 1000 * 3600 * 24
                        }
                    }
                }
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否立即预定?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$message({
                                    type: 'success',
                                    message: '预定成功!'
                                },
                                console.log(this.formInline),
                            this.$confirm('您需要支付${room.price}$', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.$message({
                                        type: 'success',
                                        message: '支付成功!'
                                    },
                                );
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消'
                                });
                            })
                            );
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });
                        <%--axios.get("${pageContext.request.contextPath}/addOrder",this.Client_info,{--%>
                        <%--    headers:{--%>
                        <%--        'Content-Type':'application/json'--%>
                        <%--    }--%>
                        <%--}).then(--%>
                        <%--    (response)=>--%>
                        <%--    {--%>
                        <%--        alert("添加成功")--%>
                        <%--    }--%>
                        <%--)--%>
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

        }
    })
</script>
</html>
